<template>
	<swiper :class="mClass" :indicator-dots="false" :circular="false" :autoplay="true" interval="5000" duration="500"
		indicator-color="#8799a3" indicator-active-color="#0081ff" @change="handleCardSwiper">
		<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
			<view class="swiper-item">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	let cardCur = 0
	const props = defineProps({
		dotStyle: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		},
		card: {
			type: [Boolean, String],
			default: false
		}
	})
	// let mClass = props.dotStyle ? 'square-dot' : 'round-dot'
	let mClass = props.card ? ' card-swiper' : ' screen-swiper'
	const swiperList = [{
		id: 0,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
	}, {
		id: 1,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
	}, {
		id: 2,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
	}, {
		id: 3,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
	}, {
		id: 4,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
	}, {
		id: 5,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
	}, {
		id: 6,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
	}]
	const handleCardSwiper = (e) => {
		cardCur = e.detail.current
		emit('action', cardCur)
	}
</script>

<style>
	.swiper-item {
		height: auto;
	}
</style>
